<template>
  <div>
    <head_view title="会员"></head_view>
    <article>
        <mt-swipe :auto="0">
           <mt-swipe-item>
               <ul class="member_one">
                   <router-link to="/member/firend" tag="li" active-class="select">
                      <em></em>
                      <i>粉丝列表</i>
                   </router-link>
                   <router-link to="/member/tied" tag="li" active-class="select">
                      <em></em>
                      <i>绑约会员</i>
                   </router-link> 
                   <router-link to="/member/unbundling" tag="li" active-class="select">
                      <em></em>
                      <i>解绑会员</i>
                   </router-link>

                   <!-- <router-link to="/member/tied" tag="li" active-class="select">
                      <em></em>
                      <i>绑约会员</i>
                   </router-link>  -->
               </ul>
           </mt-swipe-item>
           <mt-swipe-item>
               <ul class="member_two">
                   <router-link to="/member/ranking" tag="li" active-class="select">
                      <em></em>
                      <i>会员排名</i>
                   </router-link>
                   <router-link to="/member/label" tag="li" active-class="select">
                      <em></em>
                      <i>会员标签</i>
                   </router-link> 
                   <router-link to="/member/screening" tag="li" active-class="select">
                      <em></em>
                      <i>高级筛选</i>
                   </router-link>

                   <!-- <router-link to="/member/unbundling" tag="li" active-class="select">
                      <em></em>
                      <i>解绑会员</i>
                   </router-link> -->
               </ul>
           </mt-swipe-item>
       </mt-swipe>
       <div>
           <router-view></router-view>
       </div> 
    </article>
  </div>
</template>

<script>
  import Head from '../../public/head.vue'
  export default {
    data () {
      return {

      }
    },
    components:{
      head_view:Head
    }
  }
</script>

<!-- Add "scoped" attribute to limit CSS to this component only  -->
<style scoped lang="less">
.mint-swipe-indicator.is-active {
    background: red;
}
article{
  width:100%;
  position: absolute;
  top:1rem;
  bottom:0;
  overflow-x:hidden;
  overflow-y:auto;
  .mint-swipe{
    height: 1.6rem;
    background-color: #fff;
    border-bottom:0.01rem solid #c9c9c9; 
    ul{
       display: box;
       display: -webkit-box;
       display: flex;
       display: -webkit-flex;
       margin-top:0.28rem;
       li{
           box-flex: 1;
           -webkit-box-flex: 1;
           flex: 1;
           -webkit-flex: 1;
           text-align: center;
           em{
              display: block;
              width:0.64rem;
              height: 0.64rem;
              background:url(../../../common/images/member.png) no-repeat; 
              background-size: 7.68rem 0.64rem;
              margin:0 auto;
           }
           i{
              display: block;
              font-size: 0.24rem;
              color:#b4b4b4;
           }
       } 
    }
  }
}
.member_one li:nth-child(1) em{
  background-position: -1.92rem 0;
} 
.member_one li:nth-child(2) em{
  background-position: -4.48rem 0;
} 
.member_one li:nth-child(3) em{
  background-position: -5.76rem 0;
} 
.member_two li:nth-child(1) em{
  background-position: -1.28rem 0;
} 
.member_two li:nth-child(2) em{
  background-position: -6.4rem 0;
}
.member_two li:nth-child(3) em{
  background-position: -3.2rem 0;
}
</style>
